import CascaderImg from "@/assets/formItemExample/Cascader.svg";
import CheckboxImg from "@/assets/formItemExample/Checkbox.svg";
import ColorPickerImg from "@/assets/formItemExample/ColorPicker.svg";
import DatePickerImg from "@/assets/formItemExample/DatePicker.svg";
import InputImg from "@/assets/formItemExample/Input.svg";
import InputNumberImg from "@/assets/formItemExample/InputNumber.svg";
import RadioImg from "@/assets/formItemExample/Radio.svg";
import RateImg from "@/assets/formItemExample/Rate.svg";
import SelectImg from "@/assets/formItemExample/Select.svg";
import SwitchImg from "@/assets/formItemExample/Switch.svg";
import TimePickerImg from "@/assets/formItemExample/TimePicker.svg";
import TreeSelectImg from "@/assets/formItemExample/TreeSelect.svg";
import UploadImg from "@/assets/formItemExample/Upload.svg";
import {
  Cascader,
  Checkbox,
  ColorPicker,
  DatePicker,
  Input,
  InputNumber,
  Radio,
  Rate,
  Select,
  Switch,
  TimePicker,
  TreeSelect,
  Upload,
} from "antd";
import { JSX, Key } from "react";
import {
  IConfigProps,
  InputConfig,
  InputNumberConfig,
  SelectConfig,
} from "./utils/componentConfig";

const { TextArea } = Input;

export type TFormItemType =
  | "Cascader"
  | "Checkbox"
  | "ColorPicker"
  | "DatePicker"
  | "Input"
  // | "TextArea"
  | "InputNumber"
  | "Radio"
  | "Rate"
  | "Select"
  | "Switch"
  | "TimePicker"
  | "TreeSelect"
  | "Upload";

export const DEFAULT_COL_SPAN = 12; // 默认列宽

export interface IFormItemConfig {
  name: string; // 表单项名称 !!! 不要重复
  label: string; // 表单项文本
  placeholder?: string; // 提示文本
  required?: boolean; // 是否必填
  requiredMessage?: string; // 必填提示
  colSpan?: number; // 列宽 默认 DEFAULT_COL_SPAN
  type: TFormItemType; // 组件类型

  // input 相关配置
  lengthLimit?: number; // 输入长度限制
  minRows?: number; // 最小行数
  maxRows?: number; // 最大行数

  // select
  optionsType?: 1 | 2; // 下拉类型 自定义|通过配置读取
  options?: any[];
  optionsOrigin?: Key; // 选项通过配置读取时 选择的配置项id

  // inputNumber
  controls?: boolean; // 是否显示控制按钮
  suffix?: string; // 后缀文本
  min?: number; // 最小值
  max?: number; // 最大值
  precision?: number; // 数值精度
}

export interface IFormItem {
  title: string; // 标题
  img: string; // 图片示例
  type: TFormItemType; // 组件类型
  Component: any; // 组件对应的React组件
  Config?: (props: IConfigProps) => JSX.Element; // 表单组件特殊的配置项
}

export const formItemList: IFormItem[] = [
  {
    title: "输入框",
    img: InputImg,
    type: "Input",
    Component: Input,
    Config: InputConfig,
  },
  // { title: "文本域", img: InputImg, type: "TextArea", Component: TextArea },
  {
    title: "选择器",
    img: SelectImg,
    type: "Select",
    Component: Select,
    Config: SelectConfig,
  },
  {
    title: "数字输入框",
    img: InputNumberImg,
    type: "InputNumber",
    Component: InputNumber,
    Config: InputNumberConfig,
  },
  {
    title: "日期选择框",
    img: DatePickerImg,
    type: "DatePicker",
    Component: DatePicker,
  },
  { title: "多选框", img: CheckboxImg, type: "Checkbox", Component: Checkbox },
  { title: "单选框", img: RadioImg, type: "Radio", Component: Radio },
  {
    title: "树选择",
    img: TreeSelectImg,
    type: "TreeSelect",
    Component: TreeSelect,
  },
  { title: "开关", img: SwitchImg, type: "Switch", Component: Switch },
  {
    title: "时间选择器",
    img: TimePickerImg,
    type: "TimePicker",
    Component: TimePicker,
  },
  { title: "上传", img: UploadImg, type: "Upload", Component: Upload },
  {
    title: "级联选择",
    img: CascaderImg,
    type: "Cascader",
    Component: Cascader,
  },
  {
    title: "颜色选择器",
    img: ColorPickerImg,
    type: "ColorPicker",
    Component: ColorPicker,
  },
  { title: "评分", img: RateImg, type: "Rate", Component: Rate },
];
